<template>
	<view>
		<view class="top-title defalut-bg padding6">
			<view class="left-title">维修设备信息</view>
			<view class="status"
				:class="[dataInfo.verifyStatus==0?'title-dyz':(dataInfo.verifyStatus==2||dataInfo.verifyStatus==9||dataInfo.verifyStatus==4)?'title-close':(dataInfo.verifyStatus==1||dataInfo.verifyStatus==5)?'title-finish':'']">
				{{dataInfo.verifyStatus==0?'待验证':dataInfo.verifyStatus==1?'验证通过':dataInfo.verifyStatus==2?'验证不通过':dataInfo.verifyStatus==4?'关闭-待验证':dataInfo.verifyStatus==5?'维修完成':dataInfo.verifyStatus==9?'维修关闭':''}}
			</view>
		</view>
		<view class="detail-title padding7 white-bg detail-title-border">
			<view class="left-title">设备名称</view>
			<view class="right-title">{{dataInfo.deviceName}}</view>
		</view>
		<view class="detail-title padding7 white-bg detail-title-border">
			<view class="left-title">设备编号</view>
			<view class="right-title">{{dataInfo.deviceNum}}</view>
		</view>
		<view class="detail-title padding7 white-bg">
			<view class="left-title">设备型号</view>
			<view class="right-title">{{dataInfo.deviceModelName}}</view>
		</view>

		<view class="" v-if="dataInfo.repairType!=2">
			<view class="detail-title2 padding7">
				报修信息
			</view>
			<view class="gz-desc padding7">
				<view class="title">故障描述</view>
				<view class="desc-reason">{{dataInfo.description}}</view>
			</view>
			<view class="gz-icon1 padding7">
				<view class="title">故障照片</view>
				<view class="icon-list">
					<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,imgList)"
						v-for="v in imgList" :src="v"></image>
					<video style="width: 210rpx;height: 210rpx;margin: 6rpx;" v-for="v in videoList" :src="v"></video>
				</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">报修人</view>
				<view class="right-title">{{dataInfo.createUserName}}</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">报修时间</view>
				<view class="right-title">{{dataInfo.createTime}}</view>
			</view>
		</view>


		<view v-if="dataInfo.repairStatus==4||dataInfo.repairStatus==9">
			<view class="detail-title2 padding7">
				关闭维修
			</view>
			<view class="gz-desc padding7">
				<view class="title">关闭维修原因：</view>
				<view class="desc-reason2">{{dataInfo.closeReason}}</view>
			</view>
			<view class="gz-icon1 padding7">
				<view class="title">相关照片</view>
				<view class="icon-list">
					<image v-for="v in closeImgList" :src="v" @tap="previewImage(v,closeImgList)"></image>
					<video v-for="v in closeVideoList" :src="v" controls></video>
				</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">提交人</view>
				<view class="right-title" v-if="dataInfo.repairType==1">{{dataInfo.repairUserName}}</view>
				<view class="right-title" v-if="dataInfo.repairType==2">{{dataInfo.createUserName}}</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">提交时间</view>
				<view class="right-title">{{dataInfo.closeTime}}</view>
			</view>
		</view>
		<view class="detail-title2 padding7">
			故障信息
		</view>
		<view class="detail-title padding7 detail-title-border">
			<view class="left-title">故障等级</view>
			<view class="right-title">{{dataInfo.failureLevel}}</view>
		</view>
		<view class="gz-desc padding7" v-if="dataInfo.repairType==2">
			<view class="title">故障描述</view>
			<view class="desc-reason2">{{dataInfo.description}}</view>
		</view>
		<view class="detail-title padding7 detail-title-border">
			<view class="left-title">故障类型</view>
			<view class="right-title">{{dataInfo.failureCategory}}</view>
		</view>
		<view class="gz-desc padding7 detail-title-border">
			<view class="title">故障现象</view>
			<view class="desc-reason2">{{dataInfo.failurePhenomenon}}</view>
		</view>
		<!-- <view class="detail-title detail-title-border">
			<view class="left-title">解决方案</view>
			<view class="right-title">{{dataInfo.solution}}</view>
		</view> -->
		<view class="gz-desc padding7">
			<view class="title">解决方案</view>
			<view class="desc-reason2">{{dataInfo.solution}}</view>
		</view>
		<view class="top-title padding7 defalut-bg padding6">
			<view class="left-title">维修信息</view>
			<view class="right-title" style="font-size: 28rpx;color: #666666;">维修工单号：{{dataInfo.repairOrderNum}}</view>
		</view>
		<view class="detail-title padding7 detail-title-border">
			<view class="left-title">故障等级</view>
			<view class="right-title">{{dataInfo.failureLevel}}</view>
		</view>
		<view class="detail-title padding7 detail-title-border">
			<view class="left-title">维修类型</view>
			<view class="right-title">{{dataInfo.repairType==1?'内部维修':dataInfo.repairType==2?'委外维修':''}}</view>
		</view>
		<!-- <view class="detail-title detail-title-border">
			<view class="left-title">维修内容</view>
			<view class="right-title">{{dataInfo.content}}</view>
		</view> -->
		<view class="gz-desc padding7">
			<view class="title">维修内容</view>
			<view class="desc-reason2">{{dataInfo.content}}</view>
		</view>
		<view class="gz-icon1 padding7">
			<view class="title">维修照片</view>
			<view class="icon-list">
				<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,repairImgList)"
					v-for="v in repairImgList" :src="v"></image>
				<video style="width: 210rpx;height: 210rpx;margin: 6rpx;" v-for="v in repairVideoList" :src="v"></video>
			</view>
		</view>
		<view class="detail-title3 padding7" v-if="dataInfo.partList&&dataInfo.partList.length>0">
			维修备件列表(内部)
		</view>
		<view class="list-wrapper">
			<view class="list-item" v-for="(item,index) in dataInfo.partList" :key="index">
				<view class="left-icon">
					<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
					</image>
				</view>
				<view class="right-txt">
					<view class="txt1">{{item.partNum?item.partNum+'-':''}}{{item.partName}}</view>
					<view class="txt3">
						<!-- <view>{{item.partTypeName}}</view>
						<view style="margin-left: 20rpx;">使用数量：{{item.totalAmount}}</view> -->
						<view style="width:200rpx;">{{item.partTypeName}}</view>
						<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：{{item.totalAmount}}
						</view>
					</view>
					<!-- <view class="txt2">总价值：{{item.price}}</view> -->
				</view>
			</view>
		</view>
		<view class="" v-if="dataInfo.repairType!=1">
			<view class="detail-title padding7 white-bg detail-title-border">
				<view class="left-title">维修厂家</view>
				<view class="right-title">{{dataInfo.repairFactory}}</view>
			</view>
			<view class="detail-title padding7 white-bg detail-title-border">
				<view class="left-title">外部维修费用</view>
				<view class="right-title">{{dataInfo.outsourceFee?dataInfo.outsourceFee:0}}元</view>
			</view>
			<view class="detail-title padding7 white-bg detail-title-border">
				<view class="left-title">内部维修费用</view>
				<view class="right-title">{{dataInfo.repairFee?dataInfo.repairFee:0}}元</view>
			</view>
		</view>
		<view class="detail-title padding7 white-bg detail-title-border">
			<view class="left-title">维修总费用</view>
			<view class="right-title">{{getTotalFree(dataInfo.outsourceFee,dataInfo.repairFee)}}</view>
		</view>
		<view class="detail-title padding7 white-bg detail-title-border">
			<view class="left-title">维修人</view>
			<view class="right-title">{{dataInfo.repairUserName}}</view>
		</view>
		<view class="detail-title-colum detail-title-colum2 detail-title-border">
			<view class="left-title">维修时间</view>
			<view class="right-title">
				{{dataInfo.startTime!=''?dataInfo.startTime:''}}{{(dataInfo.startTime!=''&&dataInfo.endTime!='')?'至':''}}{{dataInfo.endTime}}
			</view>
		</view>
		<view class="" v-if="dataInfo.repairType!=1&&fileList2.length>0">
			<view class="detail-title3">
				附件
			</view>
			<view class="bx-upload detail-title-border">
				<view v-for="(item,index) in fileList2" :key="index">
					<view class="tab-list">
						<view class="tab-left">
							<image src="../../../static/images/beijian/wenjian.png"></image>
						</view>
						<view class="tab-right">
							<view class="data-txt">
								<view class="txt1">{{item.label}}</view>
								<view class="txt2">{{item.size}}kb</view>
							</view>
							<view style="color: #0F53AC;font-size: 28rpx;" @click="getNewFileUrl(item.url,item.label)">
								查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-title-colum detail-title-colum2">
			<view class="left-title width4">维修验证提交时间</view>
			<view class="right-title">
				{{dataInfo.verifySubmitTime?dataInfo.verifySubmitTime:''}}
			</view>
		</view>
		<view v-if="verifyStatus!=0">
			<view class="detail-title2 padding7">
				验证信息
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">验证结果</view>
				<view class="right-title">
					{{dataInfo.verifyStatus==0?'待验证':dataInfo.verifyStatus==1?'通过':dataInfo.verifyStatus==2?'不通过':''}}
				</view>
			</view>
			<view class="gz-desc padding7" v-if="dataInfo.verifyStatus==2">
				<view class="title">原因</view>
				<view class="desc-reason2">{{dataInfo.verifyReason}}</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">验证人</view>
				<view class="right-title">{{dataInfo.verifyUserName}}</view>
			</view>
			<view class="detail-title padding7 detail-title-border">
				<view class="left-title">验收时间</view>
				<view class="right-title">{{dataInfo.verifyTime}}</view>
			</view>
		</view>
		<view class="clear-btn"></view>
		<view class="btn-bottom" v-if="verifyStatus==0">
			<view class="btn-left" @click="togoFailpage">不通过</view>
			<view class="btn-right" @click="$dianji(togoSuccesspage,'onoff')">通过</view>
		</view>
		<u-popup :show="isShow" mode="bottom" :round="24" @close="close" @open="open">
			<view class="reason">
				<view class="title">
					<view class="left">维修验证-不通过</view>
					<view class="iconfont icon-app-close title-right" @click="togoClose"></view>
				</view>
				<view class="input-textrea">
					<u--textarea :cursorSpacing='50' class="textrea" v-model="params.verifyReason"
						placeholder="请输入不通过原因"></u--textarea>
				</view>
				<view class="popup-btn">
					<view class="btn-comfir" @click="toConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				isShow: false,
				fileList2: [],
				repairOrderNum: '',
				dataInfo: {},
				params: {
					verifyStatus: '', //验证结果；1.通过 ；2.不通过
					verifyReason: '', //验证不通过的原因
					id: '' //维修id
				},
				verifyStatus: '',
				imgList: [], //图片列表
				videoList: [], //视频列表
				repairImgList: [], //维修照片列表
				repairVideoList: [],
				closeImgList: [],
				closeVideoList: [],
				onoff: true,
			}
		},
		onLoad(options) {
			if (options) {
				this.repairOrderNum = options.repairOrderNum;
				this.params.id = options.repairId;
				this.verifyStatus = options.verifyStatus;
			}
			this.getListInfo()
		},
		methods: {
			//预览图片
			previewImage: function(e, s) {
				uni.previewImage({
					current: e,
					urls: s,
				});
			},
			togoClose() {
				this.isShow = false;
			},
			togoFailpage() {
				this.isShow = true;
				this.params.verifyReason = "";
			},

			open() {
				// console.log('open');
			},
			close() {
				this.isShow = false;
				// console.log('close');
			},
			//处理图片
			getpictureList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					return splitAdd
				} else {
					return []
				}
			},
			getListInfo() {
				const that = this
				uni.$u.http.get(`/device/mobile/deviceRepair/repairDetailByOrderNum/${this.repairOrderNum}`).then(res => {
					if (res.code == 0) {
						that.dataInfo = res.data;
						that.handleFileList(res.data)
						if (res.data.fileNames) {
							that.handleAnnex(res.data.fileNames, res.data.fileUrls, res.data.fileSizes)
						}
					}
				}).catch(err => {})
			},
			//处理附件数据
			handleAnnex(name, url, size) {
				let nameArr = name.split(',')
				let urlArr = url.split(',')
				let sizeArr = size.split(',')
				if (urlArr && urlArr[0] != "") {
					for (let i = 0; i < nameArr.length; i++) {
						let obj = {
							label: nameArr[i],
							url: urlArr[i],
							size: sizeArr[i]
						}
						this.fileList2.push(obj)
					}
				}
			},
			getNewFileUrl(fileUrl, fileName) {
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${fileUrl}&fileName=${fileName}`).then(res => {
					this.lookAnnex(res.data, fileName)
				})
			},

			//查看附件
			lookAnnex(fileUrl, fileName) {

				let that = this
				uni.downloadFile({
					url: fileUrl, //下载地址，后端接口获取的链接
					// filePath: wx.env.USER_DATA_PATH + '/' + fileName,
					success: (data) => {
						if (data.statusCode === 200) {
							//预览
							var filePath = data.tempFilePath;
							let str = data.tempFilePath.split(".")[1]
							let fileType = ["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"]
							if (fileType.filter(item => item == str).length > 0) {
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: function(res) {
									}
								});
							} else {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: `暂不支持预览${str}类型文件`,
								});
							}
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			//处理判断是图片还是video
			handleFileList(data) {
				let failurePictures = data.failurePictures
				let repairPictures = data.repairPictures
				let closePictures = data.closePictures
				if (failurePictures) {
					let fileList = failurePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})
				}
				if (repairPictures) {
					let fileList = repairPictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.repairVideoList.push(item)
						} else {
							this.repairImgList.push(item)
						}
					})
				}
				if (closePictures) {
					let fileList = closePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.closeVideoList.push(item)
						} else {
							this.closeImgList.push(item)
						}
					})
				}
			},
			getTotalFree(price, price2) {
				let t = '0'
				if (price || price2) {
					t = price + price2
				} else {
					t = '0'
				}
				return t + '元'
			},
			//通过申请
			togoSuccesspage() {
				const that = this
				this.params.verifyStatus = 1;
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确定验证通过？',
					success: function(res) {
						if (res.confirm) {
							that.getPutVerifyRepair();
						} else {
							// 执行取消后的操作
						}
					}
				})
			},
			//验证不通过
			toConfirm() {
				if (this.params.verifyReason == '') {
					uni.$u.toast('请填写不通过原因')
					return
				}
				this.params.verifyStatus = 2;
				this.getPutVerifyRepair();
			},
			getPutVerifyRepair() {
				uni.$u.http.post(`/device/mobile/deviceRepair/verifyRepair`, this.params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/subPackagesA/repairverify/index'
							})
						}, 2000)
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.list-wrapper {
		// padding-bottom: 30rpx;
		// border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 32rpx;
			background: #fff;
			border-radius: 4px;
			border-bottom: 1px solid #f2f2f2;
			// margin: 10rpx 32rpx;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				width: 100%;
				

				.txt1 {
					font-size: 32rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
					word-wrap: break-word;
					
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					// margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #8c8c8c;
					font-size: 28rpx;
				}
			}
		}
	}
	.gz-icon1 {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;
	
		.title {
			font-size: 32rpx;
			color: #666666;
		}
	
		.icon-list {
			display: grid;
			grid-gap: 12rpx;
			grid-template-columns: repeat(3, 218rpx);
			padding-top: 20rpx;
	
			image {
				width: 218rpx;
				height: 218rpx;
				
			}
	
			video {
				width: 218rpx;
				height: 218rpx;
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.detail-title-colum {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		padding: 20rpx 30rpx;
		font-size: 34rpx;

		.left-title {
			color: #666666;
		}

		.right-title {
			word-wrap: break-word;
			color: #2b2b2b;
			margin-top: 20rpx;
		}
	}

	.detail-title-colum2 {
		display: flex;
		padding: 32rpx 30rpx;
		justify-content: space-between;
		flex-direction: initial;
		font-size: 32rpx;

		.left-title {
			color: #666666;
		}

		.right-title {
			word-wrap: break-word;
			// word-break: break-all;
			color: #2b2b2b;
			width: 50%;
			margin-top: 0;
			text-align: right;
		}
	}

	.bx-upload {
		padding: 0 30rpx 20rpx 30rpx;
		background: #fff;

		.tab-list {
			display: flex;
			padding: 30rpx 0 30rpx 30rpx;
			border-radius: 8rpx;
			background: #f2f2f2;
			margin-top: 20rpx;

			.tab-left {
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}
			}

			.tab-right {
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.data-txt {
					max-width: 460rpx;

					.txt1 {
						max-width: 460rpx;
						font-size: 28rpx;
						overflow: hidden;
						// text-overflow: ellipsis;
						white-break: break-all;
						color: #2B2B2B;
					}

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
						margin-top: 10rpx;
					}
				}
			}

		}
	}

	.clear-btn {
		width: 100%;
		height: 212rpx;
	}

	.btn-bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		// padding: 20rpx 0;

		.btn-left {
			width: 45%;
			text-align: center;
			// padding: 20rpx 0;
			border: 1px solid #fa4016;
			color: #fa4016;
			border-radius: 12rpx;
		}

		.btn-right {
			width: 45%;
			text-align: center;
			// padding: 20rpx 0;
			background: #0F53AC;
			color: #fff;
			border-radius: 12rpx;
		}
	}

	.reason {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 34rpx;
			color: #000000;

			.left {
				width: 90%;
				text-align: center;
			}

			.title-right {
				width: 60rpx;
				margin-left: 0rpx;
				text-align: center;
			}
		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

		.popup-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;

			.btn-comfir {
				width: 94%;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 6px;
				background: #0F53AC;
				text-align: center;
				font-size: 34rpx;
				color: #fff;

			}
		}
	}

	.status {
		// margin-top: 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
	}

	.title-ongoing {
		color: rgba(2, 173, 130, 1);
		background: rgba(2, 173, 130, 0.2);
	}

	.title-dyz {
		color: rgba(15, 83, 172, 1);
		background-color: rgba(15, 83, 172, 0.2);
	}

	.title-close {
		color: rgba(237, 118, 21, 1);
		background-color: rgba(252, 119, 10, 0.2);
	}

	.title-finish {
		color: rgba(2, 173, 130, 1);
		background-color: rgba(2, 173, 130, 0.2);
	}

	.gz-desc {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 32rpx;
			color: #666666;
		}

		.desc-reason2 {
			word-wrap: break-word;
			font-size: 32rpx;
			color: #2b2b2b;
			margin-top: 16rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// -webkit-line-clamp: 2;
			// -webkit-box-orient: vertical;
		}
	}
</style>